<template>

<div>
  <div class="backroad" id="map">
    
  </div>
 <div class="input-card">
    <label style='color:white;font-weight:600;padding-top:0.5rem;'>公交线路查询</label><br>
    <div class="input-item">
            <div class="input-item-prepend" style="color:white"><span class="input-item-text" >线路名称</span></div>
            <input id='BusLineName' type="text" style=" height: 1.5rem; border-radius: 10px;outline: none;">
    </div>
    <input id="search" type="button" class="btn" value="查询" />
    <router-link to="/road"><button class="btn2">返回</button></router-link>
</div>
</div>
</template>

<script>
  export default {
    name: 'three',
    mounted() {
    var map = new AMap.Map("map", {
        resizeEnable: true,
        center: [121.550357, 29.874556],//地图中心点
        zoom: 13, //地图显示的缩放级别
       
    });
    var linesearch;
    /*公交线路查询*/
    function lineSearch() {
        var busLineName = document.getElementById('BusLineName').value;
        if(!busLineName) return;
        //实例化公交线路查询类，只取回一条路线
        
        linesearch = new AMap.LineSearch({
            pageIndex: 1,
            city: '宁波',
            pageSize: 2,
            extensions: 'all'
        });
        
        //搜索“536”相关公交线路
        linesearch.search(busLineName, function(status, result) {
            map.clearMap()
            if (status === 'complete' && result.info === 'OK') {
                lineSearch_Callback(result);
            } else {
                alert(result);
            }
        });
    }
    /*公交路线查询服务返回数据解析概况*/
    function lineSearch_Callback(data) {
        var lineArr = data.lineInfo;
        var lineNum = data.lineInfo.length;
        if (lineNum == 0) {
        } else {
            for (var i = 0; i < lineNum; i++) {
                var pathArr = lineArr[i].path;
                var stops = lineArr[i].via_stops;
                var startPot = stops[0].location;
                var endPot = stops[stops.length - 1].location;
                if (i == 0) //作为示例，只绘制一条线路
                drawbusLine(startPot, endPot, pathArr);
            
            }
        }
    }
    /*绘制路线*/
    function drawbusLine(startPot, endPot, BusArr) {
        //绘制起点，终点
        new AMap.Marker({
            map: map,
            position: startPot, //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        new AMap.Marker({
            map: map,
            position: endPot, //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });
        //绘制乘车的路线
         new AMap.Polyline({
            map: map,
            path: BusArr,
            
            strokeColor: "#09f",//线颜色
            strokeOpacity: 0.8,//线透明度
            isOutline:true,
            outlineColor:'white',
            strokeWeight: 6//线宽
        });
        map.setFitView();
    }
    lineSearch();
    document.getElementById('search').onclick = lineSearch;
    },
    methods: {
     
    }
  }
</script>

<style scoped>
  .backroad {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
.input-card{
  display: flex;
  justify-content: center;
  z-index: 10000;
  position: fixed;
  top: 80%;
  left: 80%;
  background-color: #1e1e1e;
  border-radius: 10px;
  width: 12rem;
  height: 8rem;
}
.input-item{
  position: absolute;
  top: 2.5rem;
  left: 1rem;
  font-size: 0.9rem;
}
.btn{
  position: relative;
  top: 6rem;
  height: 1.5rem;
  width: 3rem;
 right: 4rem;
}
.btn2{
  position: relative;
  top: 6rem;
  height: 1.5rem;
  width: 3rem;
 right: 2.5rem;
}
</style>

